<template>
  <!-- page: ColumnDetail -->
  <div class = "column-detail-page w-75 mx-auto">
    <div
      class = "column-info row mb-4 border-bottom pb-4 align-items-center"
      v-if = "column"
    >
      <div class = "col-3 text-center">
        <img
          class = "rounded-circle border w-100"
          v-bind:src="column.avatar.url"
          v-bind:alt="column.title"
        >
      </div>
      <div class = "col-9">
        <h4>{{column.title}}</h4>
        <p class = "text-muted">{{column.description}}</p>
      </div>
    </div>
    <post-list :list="list"></post-list>
  </div>
</template>

<script lang = "ts">
import { defineComponent, computed, onMounted } from 'vue'
// 导入 vue-router
import { useRoute } from 'vue-router'
// 导入 vuex
import { useStore } from 'vuex'
// 导入 组件
import PostList from '@/components/PostList.vue'
// 导入 helper
import { addColumnAvatar } from '@/assets/js/helper'
// 导入 数据
import { GlobalDataProps, ColumnProps } from '@/assets/js/store'

// 对setup函数进行封装，返回options的对象
export default defineComponent({
  // 页面名称
  name: 'ColumnDetail',
  // 注册组件
  components: {
    PostList
  },

  // 组合式api入口
  setup () {
    // 路由的信息
    const route = useRoute()
    // 泛型 useStore<GlobalDataProps>()
    const store = useStore<GlobalDataProps>()
    const currentId = route.params.id
    // 组件挂载时触发的函数
    onMounted(() => {
      // 调用从服务器异步来的数据 - fetchColumns
      store.dispatch('fetchColumn', currentId)
      // 调用从服务器异步来的数据 - fetchPosts
      store.dispatch('fetchPosts', currentId)
    })
    // 当前用户 专栏数据
    const column = computed(() => {
      const selectColumn = store.getters.getColumnById(currentId) as ColumnProps | undefined
      if (selectColumn) {
        addColumnAvatar(selectColumn, 100, 100)
      }
      return selectColumn
    })
    // 当前专栏 文章列表数据
    const list = computed(() => store.getters.getPostsByCid(currentId))
    return {
      column,
      list
    }
  }
})
</script>

<style lang="css" scoped>
</style>
